<template>
  <div class="content" v-loading.fullscreen="fullscreenLoading">
    <img class="stamps" :src="PUBLIC_URL + `/${leave.departmentName}pass.png`" alt=""
      v-if="leave.state == 16 || leave.state == 22" />
    <slot :leaveData="leave" :vetting="vetting"></slot>
    <div class="detail" style="height: 100rem" v-show="leave.state !== 3">
      <span>防伪码：</span>
      <div class="code">
        <img :src="`${API_BASE_URL}v1/biz/leaves/QRcode/${route.params.id}/`" ref="code" />
        <h3>(截图时请展示)</h3>
      </div>
    </div>
    <div class="delete" v-show="leave.state !== 3 && leave.state !== 16 & leave.state !== 22">
      <el-button @click="delectLeave" style="width: 90%" size="large" type="primary">
        撤销申请
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { getleave, reqLeaveImages, reqDeleteLeave } from '@/api/student';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const code = ref();
const route = useRoute();
const router = useRouter();
const leave = ref({});

const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;
const API_BASE_URL = import.meta.env.VITE_APP_BASE_API;

const vetting = ref({
  parent: {
    detail: ''
  },
  headTeacher: {
    detail: ''
  },
  sapprover: {
    detail: ''
  },
  eapprover: {
    detail: ''
  }
});
const fullscreenLoading = ref(true);
const getLeaveImages = async id => {
  const res = await reqLeaveImages(id);
  return res;
};
const getleaveContent = async () => {
  const res = await getleave(route.params.id);
  fullscreenLoading.value = false;
  leave.value = res.data;
  if (res.status === '200') {
    const beforeApprover = leave.value.beforeApprover;
    if (beforeApprover[2]) {
      vetting.value.parent = {
        detail: `${Object.keys(beforeApprover[2])[0]}(${Object.values(beforeApprover[2])[0]
          })`
      };
    }
    if (beforeApprover[6]) {
      vetting.value.headTeacher = {
        detail: `${Object.keys(beforeApprover[6])[0]}(${Object.values(beforeApprover[6])[0]
          })`
      };
    }
    if (beforeApprover[13]) {
      vetting.value.sapprover = {
        detail: `${Object.keys(beforeApprover[13])[0]}(${Object.values(beforeApprover[13])[0]
          })`
      };
    }
    if (beforeApprover[19]) {
      vetting.value.eapprover = {
        detail: `${Object.keys(beforeApprover[19])[0]}(${Object.values(beforeApprover[19])[0]
          })`
      };
    }
    leave.value.imageIds.forEach(id => {
      getLeaveImages(id).then(result => {
        if (leave.value.imageUrls) {
          leave.value.imageUrls.push(URL.createObjectURL(result));
        } else {
          leave.value.imageUrls = [URL.createObjectURL(result)];
        }
      });
    });
  }
};

getleaveContent();

const delectLeave = async () => {
  const form = {
    id: route.params.id
  };

  const res = await reqDeleteLeave(form);
  if (res.resultCode === '200') {
    ElMessage({
      type: 'success',
      message: '撤销成功'
    });
    router.push('/student/index');
  } else {
    ElMessage({
      type: 'error',
      message: res.resultMessage
    });
    router.push('/student/index');
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin-top: 20rem;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-around;
}

.stamps {
  position: absolute;
  width: 140rem;
  height: 140rem;
  right: 15rem;
  bottom: 200rem;
  z-index: 999;
}

.detail {
  display: flex;
  width: 90vw;
  height: 30rem;
  font-size: 14rem;
}

.detail span:first-child {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  margin-right: 10rem;
}

.detail span:last-child {
  width: 65%;
  height: 100%;
  border-radius: 5rem;
  border: 1px solid #d0d0d0;
  color: #545454;
  display: flex;
  justify-content: start;
  align-items: center;

  & {
    padding-left: 5rem;
  }
}

.content .code {
  width: 65%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;

  img {
    width: 60rem;
    height: 60rem;
  }

  h3 {
    padding-left: 5rem;
    color: #a52a2a;
  }
}

.noshow {
  display: none;
}

.delete {
  margin-top: 10rem;
  width: 100vw;
  height: 70rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
